<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header">
          <div class="header-title"></div>
          <div class="header-user">
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ loginUser?.name }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <el-dropdown-item>个人信息</el-dropdown-item> -->
                  <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div class="left-aside">
            <el-menu
              active-text-color="#ffd04b"
              background-color="rgb(222, 41, 16)"
              class="el-menu-vertical-demo"
              text-color="#fff"
              @select="handleOpen"
            >
              <el-sub-menu
                v-for="(item, index) in allRouter"
                :key="index"
                :index="index + 1 + ''"
              >
                <template #title>
                  <el-icon v-if="item.name === '资产监控'"><Van /></el-icon>
                  <el-icon v-if="item.name === '系统管理'"><Tools /></el-icon>
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    v-for="(it, i) in item.children"
                    :key="i"
                    :index="it.path"
                    >&nbsp;&nbsp;{{ it.name }}</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </div>
        </el-aside>
        <el-main>
          <div class="content-main">
            <!--面包屑-->
            <div class="breadcrumb" v-if="!firstPage">
              <el-breadcrumb :separator-icon="DArrowRight">
                <el-breadcrumb-item
                  v-for="(item, index) in currentPath"
                  :key="index"
                  >{{ item }}</el-breadcrumb-item
                >
              </el-breadcrumb>
            </div>
            <!--内容-->
            <div class="first-page" v-if="firstPage"></div>
            <div class="content" v-if="!firstPage">
              <router-view></router-view>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; // 引入useRouter函数
import { Tools, Van, DArrowRight, ArrowDown } from "@element-plus/icons-vue";
const router = useRouter(); // 获取路由实例
const route = useRoute(); // 获取路由实例
import http from "@/request/request";
interface RouterAdminPath {
  path: string;
  parentName?: string;
  name: string;
  insert: boolean;
  delete: boolean;
  update: boolean;
  select: boolean;
}
interface RouterAdmin {
  name: string;
  children: RouterAdminPath[];
}
interface LoginUser {
  phone: string;
  name: string;
  orgName?: string;
  orgId?: number;
}
//-----------------------------------变量--------------------------------------------//
const currentPath = ref<string[]>([]);

const allRouter = ref<RouterAdmin[]>([]);
const loginUser = ref<LoginUser>();
const firstPage = ref<boolean>(true);

//--------------------------------方法------------------------------------------------//
// 登出
const loginOut = async () => {
  const token = localStorage.getItem("token");
  if (token) {
    try {
      await http.post<string>("/api/user/logout");
    } catch (error) {
      console.log(error);
      return;
    }
    localStorage.removeItem("token");
    router.replace("/login");
  }
};
const handleOpen = (key: string, keyPath: string[]) => {
  firstPage.value = false;
  currentPath.value = [];
  const parentPath = allRouter.value[parseInt(keyPath[0]) - 1];
  currentPath.value.push(parentPath.name);
  const path = parentPath.children.filter((item) => item.path === key);
  currentPath.value.push(path[0].name);
  router.push(path[0].path);
};
// 请求获取菜单权限
const getMenu = async () => {
  try {
    const { data } = await http.get<RouterAdmin[]>(
      "/api/user/getRoutesPermission"
    );
    allRouter.value = data;
    allRouter.value.forEach((r) => {
      r.children.forEach((c) => {
        localStorage.removeItem(c.path);
        c.parentName = r.name;
        localStorage.setItem(c.path, JSON.stringify(c));
      });
    });
  } catch (err) {
    console.log(err);
  }
};

const getLoginUserInfo = async () => {
  try {
    const { data } = await http.get<LoginUser>(
      "/api/system/getUserInfoByToken"
    );
    loginUser.value = data;
  } catch (err) {
    console.log(err);
  }
};

// 设置当前激活的tab索引
const updateActiveTab = () => {
  const path = route.path;
  if (path != "/") {
    firstPage.value = false;
    const p = localStorage.getItem(path) || "{}";
    const pJson = JSON.parse(p);
    currentPath.value.push(pJson.parentName);
    currentPath.value.push(pJson.name);
  } else {
    firstPage.value = true;
  }
};
onMounted(() => {
  getMenu();
  getLoginUserInfo();
  updateActiveTab();
});
</script>

<style lang="less" scoped>
.common-layout,
.el-container {
  height: 100%;
}
.el-main,
.el-header {
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 100%;
  background-color: rgb(222, 41, 16);
  display: flex;
  .header-title {
    height: 60px;
    width: 200px;
    background-size: cover;
    background-repeat: repeat;
    background-image: url(../assets/logo1.png);
  }
  .header-user {
    position: absolute;
    right: 4%;
    .el-dropdown-link {
      color: aliceblue;
      font-size: 14px;

      line-height: 60px;
    }
  }
}
.content-main {
  height: 100%;
  width: 100%;
  background-color: rgb(240, 242, 245);
  .breadcrumb {
    padding-left: 20px;
    padding-top: 20px;
  }
  .content {
    padding-left: 20px;
    padding-top: 20px;
    width: 98%;
    height: 90%;
  }
  .first-page {
    width: 100%;
    height: 100%;
    margin: 0;
    background-image: url(../assets/first-page.png);
    background-size: 100%;
    background-repeat: repeat;
  }
}
.left-aside {
  height: 100%;
  background-color: rgb(222, 41, 16);
}
.header .header-user .el-dropdown-link[data-v-9ea40744] {
  outline: none;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-menu {
  border-right-width: 0;
}
</style>